<template>
<div class="box">
      <title-head :Crumbs="Crumbs"></title-head>
        <div v-for="(item,index) in car" :key="index" class="item">
          <a :href="item.manageUrl" target="_blank">
                <img :src=" 'data:image/png;base64,'+item.pictureCode"  :title="'点击跳转'+ item.name">
                <div class="memo">
                 <h2>{{item.name}}</h2>
                 <p> {{item.memo}}</p>
                </div>
            </a>
         </div>
  </div>
</template>
<script>
import titleHead from "@/views/title"
export default {
  components:{
titleHead
  },
  data(){
    return{
        car:[],
    Crumbs:{
       router: [],
         path:[],
         token:""
      },
    }
  },
    methods: {
        server(){
            this.$http.get("/api/threesuns/services").then(res=>{
              if(res.data.data){
                  this.car = res.data.data
              }
            })
        },


    },
    mounted(){
        this.server()
    }
}
</script>
<style scoped>
.box{
  height: 100%;
  display: flex;
  flex-wrap:wrap;
  justify-content:space-around;
}
.memo {
  display: flex;
  text-align: center;
  flex-direction: column;
  color: #fff;
  position: absolute;
  top: 316px;
  left: 0;
  right: 0;
  margin: auto;

}
p {
  font-size: 14px;
}
h2 {
    font-size: 16px;
}
.item {
  width: 327px;
  height: 414px;
	transition:all .3s;
  position: relative;
}
.item:hover {
    cursor: pointer;
    transform:scale(1.01);
    transition:all .3s;
    box-shadow:4px 4px 10px #26aea1;
}
</style>
